{% extends 'base.html' %}
{% load i18n %}

{% block title %} {% trans 'Articles' %} {% endblock %}

{% block head %}
  <link href="{{ STATIC_URL }}css/articles.css" rel="stylesheet">
{% endblock head %}

{% block main %}
  <div class="page-header">
    <a href="{% url 'write' %}" class="btn btn-primary pull-right">
      <span class="glyphicon glyphicon-pencil"></span> {% trans 'Write Article' %}
    </a>
    <a href="{% url 'drafts' %}" class="btn btn-default pull-right" style="margin-right: .8em">{% trans 'Drafts' %}</a>
    <h1>{% trans 'Articles' %}</h1>
  </div>
  <div class="row">
    <div class="col-md-10">
      <section class="articles">
        {% for article in articles %}
          {% include 'articles/partial_article.html' with article=article %}
        {% empty %}
          <h4 class="no-data">{% trans 'There is no published article yet' %}. <a href="{% url 'write' %}">{% trans 'Be the first one to publish' %}!</a></h4>
        {% endfor %}
      </section>
    </div>
    <div class="col-md-2 popular-tags">
      <h4>{% trans 'Popular Tags' %}</h4>
      {% for tag, count in popular_tags %}
        <a href="{% url 'tag' tag %}"><span class="label label-default">{{ count }} {{ tag }}</span></a>
      {% endfor %}
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      {% include 'paginator.html' with paginator=articles %}
    </div>
  </div>
{% endblock main %}
